<header class="header" xmlns:th="http://www.thymeleaf.org">
    <div class="container">
        <div class="logo">
            <a href="/index">电影天堂</a>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="/index">首页</a></li>
                <li><a href="/movies">电影</a></li>
                <li><a href="/rankings">排行榜</a></li>
                <li><a href="/charts">图表展示</a></li>
            </ul>
        </nav>
        <div class="user-actions">
            <span th:if="${session.user}">
                <span class="user-dropdown">
                    <button class="user-btn">
                        <i class="fas fa-user"></i>
                        <span th:text="${session.user.username}"></span>
                    </button>
                    <span class="dropdown-content">
                        <a href="/user/center"><i class="fas fa-user-cog"></i> 个人中心</a>
                        <a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出</a>
                    </span>
                </span>
                <span th:if="${session.user.vipDuration!=0}" th:text="'会员剩余'+${session.user.vipDuration}+'天'"></span>
                <a href="javascript:void(0)"
                   class="btn btn-primary"
                   th:if="${session.user.vipDuration == 0}"
                   onclick="showVipModal()">开通会员</a>
            </span>
            <p th:unless="${session.user}">
            <a href="/user/login" class="btn btn-primary">登录</a>
            <a href="/user/register" class="btn btn-outline">注册</a>
            </p>
        </div>
    </div>
</header>

<!-- 开通会员弹层 -->
<div id="vip-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>开通会员</h2>
        <p>选择您的会员套餐：</p>
        <div class="vip-options">
            <div class="vip-option">
                <h3>月度会员</h3>
                <p>¥30.00</p>
                <a class="btn btn-primary" onclick="handlePayment('month')">立即开通</a>
            </div>
            <div class="vip-option">
                <h3>季度会员</h3>
                <p>¥80.00</p>
                <a class="btn btn-primary" onclick="handlePayment('quarter')">立即开通</a>
            </div>
            <div class="vip-option">
                <h3>年度会员</h3>
                <p>¥280.00</p>
                <a class="btn btn-primary" onclick="handlePayment('year')">立即开通</a>
            </div>
        </div>
    </div>
</div>
<script>
    function showVipModal() {
        document.getElementById('vip-modal').style.display = 'block';
    }

    function handlePayment(vipType) {
        // fetch('/pay/create?type=' + vipType)
        //     .then(response => response.text())
        //     .then(data => {
        //         const div = document.createElement('div');
        //         div.innerHTML = data;
        //         document.body.appendChild(div);
        //
        //         document.getElementById('vip-modal').style.display = 'none';
        //     })
        //     .catch(error => {
        //         console.error('支付请求失败:', error);
        //         alert('支付请求失败，请稍后重试');
        //     });
        console.log('play create');
        window.location.href="/pay/create?type="+vipType;
    }

    document.querySelector('.close').onclick = function() {
        document.getElementById('vip-modal').style.display = 'none';
    }
</script>